html.dark {
  --main-panel-bg-color: #282b3d;
  --base-bg-color: #1d2033;
  --base-bg-color-1: #32364a;
  --base-bg-color-2: #474b60;
  --base-color-white-07: rgba(255,255,255,0.7);

  #app {
    background: var(--base-bg-color);

    #container {
      background: var(--base-bg-color);

      .aside {
        background: rgba(40, 43, 61, 1.0);
        color: rgba(255,255,255,0.7);

        .top-tool {
          border-bottom: 1px solid #242737;

          svg {
            &:hover {
              color: #fdab1f;
            }
          }
        }

        .top-menu {
          > li {
            padding: 0 15px;
            border-radius: 6px;

            &:hover {
              background-color: var(--base-bg-color-2);
              backdrop-filter: blur(5px);
            }

            &.active {
              background-color: var(--base-bg-color);
              backdrop-filter: blur(5px);

              svg {
                color: #fff;
              }
            }
          }

          svg {
            color: var(--base-color-white-07);
          }

          &::-webkit-scrollbar-thumb {
            background-color: var(--base-bg-color-1);
          }
        }

        .setup-menu {
          border: none;
          padding: 0 12px 8px 12px;

          >li {
            padding: 0 15px;
            border-radius: 6px;

            &:hover {
              background-color: var(--base-bg-color-2);
              backdrop-filter: blur(5px);
            }

            &.active {
              background-color: var(--base-bg-color);
              backdrop-filter: blur(5px);

              svg {
                color: #fff;
              }
            }
          }

          svg {
            color: var(--base-color-white-07);
          }
        }
      }
    }
  }

  .el-card {
    --el-card-bg-color: var(--main-panel-bg-color);
  }

  .el-table {
    --el-table-bg-color: var(--main-panel-bg-color);
    --el-table-tr-bg-color: var(--main-panel-bg-color);
    --el-table-header-bg-color: var(--main-panel-bg-color);

    .is-top {
      --el-table-tr-bg-color: var(--el-color-info-light-9);
    }

    .is-sorting {
      --el-table-tr-bg-color: #32364a;
      filter: drop-shadow(0 0 5px rgba(60,60,60,0.5));
      position: relative;
      z-index: 1500;

      td.el-table__cell {
        border: none;
      }
    }
  }

  .el-table-v2 {
    --el-bg-color: var(--main-panel-bg-color);
  }

  .el-drawer {
    background: #1d2033 !important;
    background-color: #1d2033 !important;

    .el-drawer__body {
      background: #1d2033 !important;
      padding: 0 !important;

      .host-vhost {
        background: #1d2033;

        .nav {
          background: #282b3d;
          height: 55px;
        }
      }

      .host-edit:not(.tools) {
        background: #1d2033;
        .nav {
          background: #282b3d;
        }
        .main-wapper {
          color: rgba(255, 255, 255, 0.7);

          .main {
            background: #32364a;
          }

          .input,
          .input-textarea {
            color: #fff;
            &::-webkit-input-placeholder {
              color: rgba(255, 255, 255, 0.7);
            }
          }
          .input {
            border-bottom: 1px solid rgba(255, 255, 255, 0.7);

            &:hover {
              border-bottom: 2px solid rgba(255, 255, 255, 0.7);
            }
            &:focus {
              border-bottom: 2px solid #01cc74;
            }
            &.error {
              border-bottom: 2px solid #cc5441;
            }
          }
          .input-textarea {
            border: 1px solid rgba(255, 255, 255, 0.7);

            &:hover {
              border: 2px solid rgba(255, 255, 255, 0.7);
            }
            &:focus {
              border: 2px solid #01cc74;
            }
            &.error {
              border: 2px solid #cc5441;
            }
          }
          .el-select {
            &.error {
              .el-input__wrapper {
                border: 1px solid #cc5441;
              }
            }
          }
        }
      }

      .host-logs {
        background: #1d2033;
        > .top-tab {
          > li {
            &:hover {
              background-color: #3e4257;
            }
            &.active {
              background: #3e4257;
            }
          }
        }
      }

      .php-extensions {
        background: #1d2033;
        .nav {
          background: #282b3d;
        }
      }
    }
  }

  .el-message-box {
    &.confirm-del {
      background: #32364a;
      border: 1px solid #32364a;
      color: #fff;
      .el-message-box__message,
      .el-message-box__close {
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }

  .el-popover.el-popper.host-list-poper {
    background: #3f4358;
    color: #fff;

    .host-list-menu {
      > li {
        .el-dropdown {
          color: #fff;
        }
        &:hover {
          background: rgb(79, 82, 105);
        }
      }
    }
  }

  .el-popover.el-popper.host-sort-poper {
    background: #3f4358;
    color: #fff;

    .el-slider__runway {
      background: #e4e7ed;
    }
  }

  .host-edit.tools {
    .main-wapper {

      .input,
      .input-textarea {
        color: #fff;
        &::-webkit-input-placeholder {
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .input {
        border-bottom: 1px solid rgba(255, 255, 255, 0.7);

        &:hover {
          border-bottom: 2px solid rgba(255, 255, 255, 0.7);
        }
        &:focus {
          border-bottom: 2px solid #01cc74;
        }
        &.error {
          border-bottom: 2px solid #cc5441;
        }
      }
      .input-textarea {
        border: 1px solid rgba(255, 255, 255, 0.7);

        &:hover {
          border: 2px solid rgba(255, 255, 255, 0.7);
        }
        &:focus {
          border: 2px solid #01cc74;
        }
        &.error {
          border: 2px solid #cc5441;
        }
      }
      .el-select {
        &.error {
          .el-input__wrapper {
            border: 1px solid #cc5441;
          }
        }
      }
    }

    &.tools-file-info {
      .main-wapper {
        .select-dir-wapper {
          #selectDir {
            border: 2px dashed #ccc;
            color: #fff;
          }
        }
      }
    }
  }

  .el-dialog {
    &.host-link-dialog {
      background: #1d2033;
    }

    &.host-edit {
      background: #1d2033;

      .nav {
        background: #282b3d;
      }

      .main-wapper {
        color: rgba(255, 255, 255, 0.7);

        .main {
          background: #32364a;
        }

        .input,
        .input-textarea {
          color: #fff;
          &::-webkit-input-placeholder {
            color: rgba(255, 255, 255, 0.7);
          }
        }
        .input {
          border-bottom: 1px solid rgba(255, 255, 255, 0.7);

          &:hover {
            border-bottom: 2px solid rgba(255, 255, 255, 0.7);
          }
          &:focus {
            border-bottom: 2px solid #01cc74;
          }
          &.error {
            border-bottom: 2px solid #cc5441;
          }
        }
        .input-textarea {
          border: 1px solid rgba(255, 255, 255, 0.7);

          &:hover {
            border: 2px solid rgba(255, 255, 255, 0.7);
          }
          &:focus {
            border: 2px solid #01cc74;
          }
          &.error {
            border: 2px solid #cc5441;
          }
        }
        .el-select {
          &.error {
            .el-input__wrapper {
              border: 1px solid #cc5441;
            }
          }
        }
      }

      &.custom-path {
        .el-dialog__body {
          .plant-title {
            svg {
              &:hover {
                color: #fdab1f;
              }
            }
          }
          .path-choose .icon-block {
            svg {
              color: #fff;

              &:hover {
                color: #fdab1f;
              }
            }
          }
        }
      }
    }
  }

  .main-right-panel {
    color: rgba(255,255,255,0.7);

    > .top-tab {
      .el-button-group>.el-button:not(:last-child) {
        margin-right: 0;
      }

      >li {
        &:not(.no-hover):hover {
          background-color: var(--base-bg-color-2);
          backdrop-filter: blur(5px);
        }
        &.active {
          background: var(--base-bg-color);
          backdrop-filter: blur(5px);
          color: #fff;
        }
      }
    }

    .php-versions-list {
      &::-webkit-scrollbar-thumb {
        background-color: var(--base-bg-color-1);
      }
      .http-serve-item {
        background-color: var(--base-bg-color-1);
        backdrop-filter: blur(5px);
      }
    }

    >.main-block {
      >.module-config {
        >.block {
          border: 1px solid var(--base-bg-color-2);
        }
      }

      .setup-common {
        .main {
          background: var(--base-bg-color-1);
          backdrop-filter: blur(5px);
        }
      }

      >.setup-config {
        .plant-title {
          .add {
            color: #fff;

            &:hover {
              color: #fdab1f;
            }
          }
        }
        .main {
          background: var(--base-bg-color-1);
          backdrop-filter: blur(5px);

          .path-choose {
            .input {
              border-bottom: 1px solid rgba(255, 255, 255, 0.7);
              color: #fff;
              &::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.7);
              }
              &:hover {
                border-bottom: 2px solid rgba(255, 255, 255, 0.7);
              }
              &:focus {
                border-bottom: 2px solid #01cc74;
              }
              &.error {
                border-bottom: 2px solid #cc5441;
              }
            }
          }
        }
      }
    }

    >.http-serve-list {

      > .empty {
        > .wapper {
          color: var(--base-color-white-07);
        }
      }

      .http-serve-item {
        background-color: var(--base-bg-color-1);
        backdrop-filter: blur(5px);

        .left {
          > .top {
            > .value {
              &:hover {
                color: #fdab1f;
              }
            }
          }

          > .bottom {
            > .url {
              color: #409eff;
              &.empty {
                color: var(--base-color-white-07);
              }
            }
          }
        }
      }
    }

    >.tools-panel {
      > li {
        background-color: var(--base-bg-color-1);
        backdrop-filter: blur(5px);
      }
    }

    &.dns-panel {
      .top-tab {
        svg {
          color: var(--base-color-white-07);
        }
      }
    }
  }

  .app-chat {
    .nav {
      background: #282b3d;
    }
  }

  .app-ai-tool {
    background: #32364a;
  }

  .password-prompt {
    background: #32364a !important;
    border: 1px solid #32364a !important;
    color: #fff !important;
    .el-message-box__message,
    .el-message-box__close {
      color: rgba(255, 255, 255, 0.7) !important;
    }
  }

  .about-dialog {
    background: #1d2033;

    .el-dialog__title,
    .el-dialog__close {
      color: #fff;
    }
  }

  .about-panel {
    .app-info {
      .app-version span {
        color: #fff;
      }
      .engine-info {
        color: #fff;
      }
    }
    .copyright {
      a {
        color: #fff;
      }
    }
  }

  .tools-system-env {
    .main-wapper {

      >.file {
        background: #32364a;
      }
    }
  }

  .app-ai-chat-main {
    background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));

    > .cell {
      > .icon {
        background: rgb(51 65 85 / var(--tw-bg-opacity, 1));
      }
      > .content {
        > .text {
          color: rgba(255, 255, 255, .7);
        }
      }
      &.ai {
        > .icon {
          color: #aa88ee;
        }
        > .content {
          > .text {
            background: rgb(51 65 85 / var(--tw-bg-opacity, 1));
          }
        }
      }
      &.user {
        > .icon {
          color: #409eff;
        }
        > .content {
          > .text {
            background: #1aad19;
          }
        }
      }
    }
  }
}

html.dark {
  #app {
    #container {
      .aside {
        .aside-inner {
          .menu {
            li {
              svg {
                color: rgba(255,255,255,0.5);
              }

              &.active {
                svg {
                  color: rgba(255,255,255,1);
                }
              }
            }
          }
        }

        .setup-menu {
          border: none;
          padding: 0 12px 8px 12px;
        }
      }
    }
  }
}

@media (max-width: 960px) {
  html.dark {
    #app {
      #container {
        .aside {
          .menu {
            padding: 0;

            >li {
              padding: 0;
              border-radius: 0;
            }
          }

          .setup-menu {
            border: none;
            padding: 0;
          }
        }
      }
    }
  }
}
